<template>
	<div id="flightPlan">
		<div class="queryPanel">
			<ul>
				
				<li>
					<span>航班：</span>
					<Select v-model="Request.flightNo" style="width:90px;">
						<Option v-for="item in flightNoList" :value="item.value" :key="item.value">{{ item.label }}</Option>
					</Select>
				</li>
				<li>
					<span>日期：</span>
					<DatePicker v-model="Request.flightDate" type="date" placeholder="Select date"></DatePicker>
				</li>
				<li>
					<Button @click="search" class="search">查询</Button>
				</li>
			</ul>
		</div>
		<div class="content" v-if="show">
			<table>
				<tr>
					<th>启用日期</th>
					<th>终止日期</th>
					<th>航班号</th>
					<th>始发地</th>
					<th>目的地</th>
					<th>出发当地时间</th>
					<th>到达当地时间</th>
					<th>Daychange</th>
					<th>舱位序列</th>
				</tr>
				<tr v-for="flight in data">
					<td>{{flight.effectiveDate}}</td>
					<td>{{flight.endDate}}</td>
					<td>
						<span>{{flight.flightNo}}</span>
						<span v-if="flight.flightSuffix">- {{flight.flightSuffix}}</span>
					</td>
					<td>{{flight.fromAirport}}</td>
					<td>{{flight.toAirport}}</td>
					<td>{{flight.departurelocalTime}}</td>
					<td>{{flight.arrivelocalTime}}</td>
					<td>{{flight.dayChange}}</td>
					<td>{{flight.classList}}</td>
				</tr>
			</table>
		</div>
		<Pagination :search='search' :request='Request' :data='data'/>
	</div>
</template>

<script>
	import main from './main';
	export default {
		...main
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
	@import "./style.scss";
</style>